<template>
      <div class="gedan">
         <ul>
             <li :class="['item' , {'bg':index === selecte}]"
              v-for="(item , index) in songsData" 
              :key="index"
              @mouseenter="mouse(index)"
              @mouseleave="leave"
              >
                 <div class="td">
                      <a  href="javascript:;" class="ply" @click.stop="play(item.id)"></a>
                 </div>
                 <div class="u-cover">
                     <a href="javascript:;">
                       <img :src="item.coverImgUrl" alt="">
                     </a>
                 </div>
                 <div class="tt">
                    <span class="txt">
                        <router-link :to="{path:'/home/playlist' , query:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
                    </span>
                </div>
                <div  :class="['td' , 'hidden' , {'show':selecte === index}]">
                    <a  href="" class="u-icn u-icn-81"></a>
                    <span class="icn icn-bg"></span>
                    <span  class="icn icn-share"></span>
                </div>
                <div class="w11">
                     <span>197首</span>
                </div>
                <div class="text">
                  <span class="s-fc3">by</span>
                  &nbsp;&nbsp;
                  <a href="javascript:;" class="s-fc3">{{item.creator.nickname}} </a>
                </div>
                <div class="w6">
                  收藏 :
                   <span class="s-fc3">{{item.bookCount}}</span>
                </div>
                <div class="last">
                   收听 :
                    <span class="s-fc4">{{Math.round(item.playCount/10000)}}万</span>
                </div>
             </li>
         </ul>
      </div>
</template>

<script>
import {searchResult} from "../../../network/search"
export default {
    props:['keywords'],
    data() {
        return {
            songsData:[],
            selecte:-1
        }
    },
    methods:{
       Result(keywords){
            searchResult(keywords,20,0,1000).then(res => {
                console.log(res.data.result.playlists[0])
              for(const item of res.data.result.playlists){
                  this.songsData.push(item)
              }
          })
       },
       mouse(index){
          this.selecte = index
       },
       leave(){
           this.selecte = -1
       },
        play(id) {
         //点击歌单播放按钮 发送歌单id
       this.$store.dispatch("song_ct",id)
    },
    },
    created(){
          this.Result(this.keywords)
    },
   watch:{
       keywords(value){
           this.songsData = []
           this.Result(value)
       }
   }
}

</script>

<style scoped>
.gedan{width: 100%;margin-top: 20px;}
.item{padding: 10px 10px 8px 18px;height: 45px;}
.td{margin-right: 5px; float: left;}
.ply{display: inline-block; width: 17px; height: 17px; margin-right: 15px;cursor: pointer;background: url("../../../assets/imgs/table.png") no-repeat; background-position: 0 -103px;}
.ply:hover{background-position: 0 -128px;}
.u-cover{width: 50px;height: 50px;float: left;margin-left: 10px;}
.u-cover a{width: 100%;height: 100%;}
.u-cover a img{width: 100%;height: 100%;}

.tt{width: 337px;height: 40px; padding: 6px 10px;float: left;}
.tt .txt{width: 300px;display: block;margin-top: 10px;font-size: 12px;font-family: Arial, Helvetica, sans-serif;line-height: 20px;}
.tt .txt:hover{text-decoration: underline;}

.td{margin-right: 5px; float: left;margin-top: 15px;}
.u-icn{ display: inline-block;overflow: hidden; vertical-align: middle; margin: 0 7px 0 0;}
.u-icn-81 { width: 13px;height: 13px; background: url("../../../assets/imgs/icon.png") no-repeat;background-position: 0px -700px;}
.u-icn:hover{background-position: -22px -700px;}

.icn{ width: 18px; height: 14px; cursor: pointer; margin: 0 7px 0 0; display: inline-block; vertical-align: middle;}
.icn-bg{background:url("../../../assets/imgs/table.png") no-repeat; background-position: 0px -174px;}
.icn-bg:hover{background-position: -20px -174px;}

.icn-share{background:url("../../../assets/imgs/table.png") no-repeat; background-position: 0px -195px;}
.icn-share:hover{background-position: -20px -195px;}

.w11{width: 60px;height: 40px; padding: 6px 10px;float: left;}
.w11 span{display: block;line-height: 20px;font-size: 12px;margin-top: 10px;margin-left: 25px;}

.text{width: 140px;height: 40px; padding: 6px 10px;float: left;}
.s-fc3{color: #999; display: inline-block;line-height: 20px;font-size: 12px; font-family: Arial, Helvetica, sans-serif;margin-top: 10px;}
a:hover{text-decoration: underline;}

.w6{width: 78px;line-height: 40px;padding: 6px 10px;float: left;font-size: 12px; font-family: Arial, Helvetica, sans-serif;}

.last{width: 60px;height:15px;padding: 16px 10px;float: left;font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
.s-fc4{color: #999; display: inline-block;line-height: 20px;font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
.bg{background: #f7f7f7;}

.hidden{opacity: 0;}
.show{opacity: 1;}
</style>